<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <div class="search-wrapper">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="日期选择" prop="stationsCode">
          <el-select
            v-model="queryParams.stationsCode"
            placeholder="请选择站点名称"
            clearable
          >
            <el-option
              v-for="item in stationsList"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="primary" icon="Search"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-card
      ><!-- 曲线 -->
      <el-row>
        <el-col :span="4">
          <el-tree-v2
            ref="treeRef"
            style="max-width: 300px"
            :data="devInfoTreeList"
            @check-change="handleCheckChange"
            show-checkbox
            :props="props"
            :height="620"
          />
        </el-col>
        <el-col :span="20">
          <el-card
            ><!-- 数据表格 -->
            <el-table
              max-height="600"
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                label="序号"
                type="index"
                width="150"
              /><el-table-column
                label="点表名称"
                align="center"
                prop="pointname"
              >
              </el-table-column>
              <el-table-column
                label="点表Code"
                align="center"
                prop="valueCode"
              />
              <el-table-column label="点表值" align="center" prop="vals" />
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted, watch, nextTick } from "vue";
import {
  getVoDevBaseInfoTreeApi,
  addRealTimeTablePara,
} from "@/api/devInfo/index";
const treeRef = ref();
const tableData = ref(); //表格数组
const nChartNum = ref(0);
const stationsList = reactive([
  {
    label: "本地场站",
    value: 0,
  },
]);
const props = {
  value: "id",
  label: "name",
  children: "devOneUnitPointInfoVoList",
  disabled: "disabled",
};

const devInfoTreeList = ref([]);
const queryParams = reactive({
  stationsCode: null,
  devInfoCode: "",
  pointCode: "",
});
//查询
const search = () => {
  nChartNum.value = selectedList.value.length;
  if (nChartNum.value <= 0) {
    return;
  }
  monitorSelectedList.value = selectedList.value.map((ele) => ({
    devPointValue: ele.id,
    devPointName: ele.name,
    tableName: ele.tableName,
  }));
  addRealTimeTablePara(monitorSelectedList.value);
};

//获取EMS基本信息
const getVoDevBaseInfoTreeApiTree = () => {
  getVoDevBaseInfoTreeApi().then((res) => {
    devInfoTreeList.value = res.data;
  });
};
getVoDevBaseInfoTreeApiTree();
const selectedList = ref([]);
const monitorSelectedList = ref([]);
//树勾选事件
const handleCheckChange = (node, checked) => {
  if (checked) {
    // 当节点被选中时，将节点数据添加到列表
    selectedList.value.push({
      id: node?.id,
      name: node?.name,
      tableName: node?.devTableName,
    });
  } else {
    // 当节点被取消选中时，从列表中移除
    selectedList.value = selectedList.value.filter(
      (item) => item.id !== node.id
    );
  }
};
const websocket = ref();
// WebSocket连接函数
const connectWebSocket = () => {
  // 替换为您的实际WebSocket地址
  websocket.value = new WebSocket("ws://localhost:8800/data-stream");

  websocket.value.onopen = () => {
    console.log("WebSocket连接已建立");
  };

  websocket.value.onmessage = (event) => {
    try {
      // 解析接收到的JSON数据
      const data = JSON.parse(event.data);
      console.log(event.data);

      // tableData.value = data;
    } catch (error) {
      console.error("解析WebSocket消息出错:", error);
    }
  };

  websocket.value.onclose = () => {
    console.log("WebSocket连接已关闭");
    // 可以在这里实现重连逻辑
  };

  websocket.value.onerror = (error) => {
    console.error("WebSocket错误:", error);
  };
};
onMounted(() => {
  connectWebSocket();
});
onUnmounted(() => {});
</script>
<style lang="scss" scoped>
:deep(.dv-scroll-board .header) {
  background: #ddd !important;
}
:deep(.dv-scroll-board .rows .row-item) {
  background: gray !important;
}
</style>
